<template>
  <div class="brand-container">
    <div class="wrap">
      <header>
        <div class="weather">
          <!-- <img :src="imgSrc">
          <span class="tem">{{ weatcherData.tem }}°C</span> 
          <span class="wea">{{ weatcherData.wea }}</span> -->
          <!-- <router-link to="/dashboard"> -->
          <!-- <div @click="goToDashboard">首页</div> -->
           <div style="height: 100%;">
          <a href="./">首页</a>
        </div> 
          <!-- </router-link> -->
        </div>
        <h2 style="font-style: italic;">天津昆仑智慧燃气安全监控平台</h2>
        <div class="showTime">
          <span class="time">{{ nowTime }}</span>
          <span class="date">
            <span>{{ week }}</span>
            <span>{{ date }}</span>
          </span> 
 
        </div>

      </header>

      <section class="mainbox">
        <div class="item left">
          <div class="panel-left-up">
            <h2>异常统计</h2>
            <!-- <cakeLinkage></cakeLinkage> -->
            <pyramidTrend></pyramidTrend>
            <div class="panel-footer"></div>
          </div>
          <div class="panel-left-down">
            <h2>工单状态</h2>
            <sinan></sinan>
            <div class="panel-footer"></div>
          </div>
          <!-- <div class="panel">
            <h2>营收状况</h2>
            <income />
            <div class="panel-footer"></div>
          </div> -->
        </div>

        <div class="item center">
          <!-- <div class="resume">
            <div class="resume-hd">
              <ul>
                <li>
                  <countTo :startVal='startVal' :endVal='490' :duration='6000' separator=""></countTo>
                </li>
                <li>
                  <countTo :startVal='startVal' :endVal='75' :duration='6000' separator=""></countTo>
                </li>
                <li>
                  <countTo :startVal='startVal' :endVal='3000' :duration='6000' separator=""></countTo>
                </li>
              </ul>
            </div>
            <div class="resume-bd">
              <ul>
                <li>公司总人数（单位：人）</li>
                <li>技术人员占比（单位：%）</li>
                <li>产品投资额（单位：万元）</li>
              </ul>
            </div>
          </div> -->
          <div class="map">
            <div class="chart" id="chart_map"></div>
            <div class="map1"></div>
            <div class="map2"></div>
            <div class="map3"></div>
          </div>
        </div>

        <div class="item right">
          <!-- <div class="panel">
            <h2>发展历程</h2>
            <history />
            <div class="panel-footer"></div>
          </div> -->
          <div class="panel-right-up">
            <h2>设备状态</h2>
            <distribution />
            <div class="panel-footer"></div>
          </div>
          <div class="panel-right-down">
            <h2>报警记录</h2>
            <history />
            <div class="panel-footer"></div>
          </div>
        </div>
      </section>

    </div>

  </div>
</template>

<script>
import '@/assets/js/flexible'
import '@/assets/js/china'
import countTo from 'vue-count-to'
import * as echarts from 'echarts';
import 'echarts-gl';
import 'echarts-liquidfill';
// import axios from 'axios';
import { screenSize } from '../assets/js/utils'

export default {
  name: 'Brand',
  components: {
    countTo
  },
  data() {
    return {
      nowTime: '',
      week: '',
      date: '',
      timer: null,
      imgSrc: '',
      weatcherData: {},
      startVal: 0,
      geoCoordMap: {},
      XAData: [
        [{ name: "鞍山" }, { name: "天津", value: 100 }],
        // [{ name: "北京" }, { name: "苏州", value: 100 }],
        // [{ name: "长沙" }, { name: "广州", value: 100 }],
        // [{ name: "长沙" }, { name: "深圳", value: 100 }],
        // [{ name: "长沙" }, { name: "西安", value: 100 }]
      ],
      XNData: [
        // [{ name: "鞍山" }, { name: "北京", value: 100 }],
        // [{ name: "长沙" }, { name: "拉萨", value: 100 }],
        // [{ name: "长沙" }, { name: "哈尔滨", value: 100 }],
        // [{ name: "长沙" }, { name: "成都", value: 100 }],
        // [{ name: "长沙" }, { name: "重庆", value: 100 }]
      ],
      YCData: [
        // [{ name: "苏州", }, { name: "鞍山", value: 100 }],
        // [{ name: "苏州", }, { name: "苏州", value: 100 }],
        [{ name: "鞍山" }, { name: "鞍山", value: 100 }],
        [{ name: "天津" }, { name: "天津", value: 100 }],
        // [{ name: "北京" }, { name: "杭州", value: 100 }]
      ]

    }
  },
  computed: {

  },
  created() {
    screenSize(this.$refs.editor)
  },
  mounted() {

    // this.getWeather();
    this.timer = setInterval(() => {
      // this.getWeather();
    }, 1000 * 60 * 60)

    this.nowTimes();
    this.getEchart();
  },
  methods: {
    timeFormate(timeStamp) { //显示当前时间
      let newDate = new Date(timeStamp);
      let year = newDate.getFullYear();
      let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
      let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
      let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours();
      let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();
      let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds();
      let week = newDate.getDay();
      let weeks = ['日', '一', '二', '三', '四', '五', '六'];
      let getWeek = '星期' + weeks[week];
      this.week = getWeek;
      this.date = year + '.' + month + '.' + date;
      this.nowTime = hh + ':' + mm + ':' + ss;
    },
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear();
    },
    clear() {
      clearInterval(this.nowTimes)
      this.nowTimes = null;
    },
    // getWeather() { // 第三方天气api接口
    //   axios.get('https://www.tianqiapi.com/api/', {
    //     params: {
    //       appid: '26148275',
    //       appsecret: '2id6H48Y',
    //       version: 'v6'
    //     }
    //   }).then(res => {
    //     if (res.data) {
    //       if (res.data.wea_img == 'xue') {
    //         this.imgSrc = require('../assets/img/brand/xue.png');
    //       } else if (res.data.wea_img == 'yin') {
    //         this.imgSrc = require('../assets/img/brand/yin.png');
    //       } else if (res.data.wea_img == 'yu' || res.data.wea_img == 'bingbao') {
    //         this.imgSrc = require('../assets/img/brand/yu.png');
    //       } else if (res.data.wea_img == 'yun') {
    //         this.imgSrc = require('../assets/img/brand/yun.png');
    //       } else if (res.data.wea_img == 'wu') {
    //         this.imgSrc = require('../assets/img/brand/wu.png');
    //       } else if (res.data.wea_img == 'shachen') {
    //         this.imgSrc = require('../assets/img/brand/shachen.png');
    //       } else if (res.data.wea_img == 'lei') {
    //         this.imgSrc = require('../assets/img/brand/lei.png');
    //       } else {
    //         this.imgSrc = require('../assets/img/brand/qing.png');
    //       }
    //       this.weatcherData = res.data;
    //     }
    //   }).catch(err => {
    //     console.log(err)
    //   })
    // },
    convertData(data) { // 地图数据转换
      let res = [];
      for (let i = 0; i < data.length; i++) {  //通过for循环遍历输入的data数组，dataItem代表当前循环中的每个元素
        let dataItem = data[i];  //获取当前循环的数据项
        let fromCoord = this.geoCoordMap[dataItem[0].name];  //从geoCoordMap对象中获取dataItem第一个元素（假设是某个地点）对应的坐标信息
        let toCoord = this.geoCoordMap[dataItem[1].name];  //同样地，获取dataItem第二个元素对应的坐标信息
        if (fromCoord && toCoord) {  //检查从geoCoordMap获取的坐标信息是否存在。如果两个地点的坐标信息都存在，执行下面的操作
          res.push({
            fromName: dataItem[0].name,  //将第一个地点的名称存入fromName字段
            toName: dataItem[1].name, //将第二个地点的名称存入toName字段
            coords: [fromCoord, toCoord],  //将两个地点的坐标信息存入coords字段，这里假设是一个包含两个坐标的数组
            value: dataItem[1].value  //将第二个地点的值（如果有的话）存入value字段
          });
        }
      }
      return res;
    },
    getEchart() { // 初始化地图数据
      let myChart = echarts.init(document.getElementById('chart_map'));

      this.geoCoordMap = {
        '海门': [121.15, 31.89],
        '鄂尔多斯': [109.781327, 39.608266],
        '招远': [120.38, 37.35],
        '舟山': [122.207216, 29.985295],
        '齐齐哈尔': [123.97, 47.33],
        '盐城': [120.13, 33.38],
        '赤峰': [118.87, 42.28],
        '青岛': [120.33, 36.07],
        '乳山': [121.52, 36.89],
        '金昌': [102.188043, 38.520089],
        '泉州': [118.58, 24.93],
        '莱西': [120.53, 36.86],
        '日照': [119.46, 35.42],
        '胶南': [119.97, 35.88],
        '南通': [121.05, 32.08],
        '拉萨': [91.11, 29.97],
        '云浮': [112.02, 22.93],
        '梅州': [116.1, 24.55],
        '文登': [122.05, 37.2],
        '上海': [121.48, 31.22],
        '攀枝花': [101.718637, 26.582347],
        '威海': [122.1, 37.5],
        '承德': [117.93, 40.97],
        '厦门': [118.1, 24.46],
        '汕尾': [115.375279, 22.786211],
        '潮州': [116.63, 23.68],
        '丹东': [124.37, 40.13],
        '太仓': [121.1, 31.45],
        '曲靖': [103.79, 25.51],
        '烟台': [121.39, 37.52],
        '福州': [119.3, 26.08],
        '瓦房店': [121.979603, 39.627114],
        '即墨': [120.45, 36.38],
        '抚顺': [123.97, 41.97],
        '玉溪': [102.52, 24.35],
        '张家口': [114.87, 40.82],
        '阳泉': [113.57, 37.85],
        '莱州': [119.942327, 37.177017],
        '湖州': [120.1, 30.86],
        '汕头': [116.69, 23.39],
        '昆山': [120.95, 31.39],
        '宁波': [121.56, 29.86],
        '湛江': [110.359377, 21.270708],
        '揭阳': [116.35, 23.55],
        '荣成': [122.41, 37.16],
        '连云港': [119.16, 34.59],
        '葫芦岛': [120.836932, 40.711052],
        '常熟': [120.74, 31.64],
        '东莞': [113.75, 23.04],
        '河源': [114.68, 23.73],
        '淮安': [119.15, 33.5],
        '泰州': [119.9, 32.49],
        '南宁': [108.33, 22.84],
        '营口': [122.18, 40.65],
        '惠州': [114.4, 23.09],
        '江阴': [120.26, 31.91],
        '蓬莱': [120.75, 37.8],
        '韶关': [113.62, 24.84],
        '嘉峪关': [98.289152, 39.77313],
        '广州': [113.23, 23.16],
        '延安': [109.47, 36.6],
        '太原': [112.53, 37.87],
        '清远': [113.01, 23.7],
        '中山': [113.38, 22.52],
        '昆明': [102.73, 25.04],
        '寿光': [118.73, 36.86],
        '盘锦': [122.070714, 41.119997],
        '长治': [113.08, 36.18],
        '深圳': [114.07, 22.62],
        '珠海': [113.52, 22.3],
        '宿迁': [118.3, 33.96],
        '咸阳': [108.72, 34.36],
        '铜川': [109.11, 35.09],
        '平度': [119.97, 36.77],
        '佛山': [113.11, 23.05],
        '海口': [110.35, 20.02],
        '江门': [113.06, 22.61],
        '章丘': [117.53, 36.72],
        '肇庆': [112.44, 23.05],
        '大连': [121.62, 38.92],
        '临汾': [111.5, 36.08],
        '吴江': [120.63, 31.16],
        '石嘴山': [106.39, 39.04],
        '沈阳': [123.38, 41.8],
        '苏州': [120.62, 31.32],
        '茂名': [110.88, 21.68],
        '嘉兴': [120.76, 30.77],
        '长春': [125.35, 43.88],
        '胶州': [120.03336, 36.264622],
        '银川': [106.27, 38.47],
        '张家港': [120.555821, 31.875428],
        '三门峡': [111.19, 34.76],
        '锦州': [121.15, 41.13],
        '南昌': [115.89, 28.68],
        '柳州': [109.4, 24.33],
        '三亚': [109.511909, 18.252847],
        '自贡': [104.778442, 29.33903],
        '吉林': [126.57, 43.87],
        '阳江': [111.95, 21.85],
        '泸州': [105.39, 28.91],
        '西宁': [101.74, 36.56],
        '宜宾': [104.56, 29.77],
        '呼和浩特': [111.65, 40.82],
        '成都': [104.06, 30.67],
        '大同': [113.3, 40.12],
        '镇江': [119.44, 32.2],
        '桂林': [110.28, 25.29],
        '张家界': [110.479191, 29.117096],
        '宜兴': [119.82, 31.36],
        '北海': [109.12, 21.49],
        '西安': [108.95, 34.27],
        '金坛': [119.56, 31.74],
        '东营': [118.49, 37.46],
        '牡丹江': [129.58, 44.6],
        '遵义': [106.9, 27.7],
        '绍兴': [120.58, 30.01],
        '扬州': [119.42, 32.39],
        '常州': [119.95, 31.79],
        '潍坊': [119.1, 36.62],
        '重庆': [106.54, 29.59],
        '台州': [121.420757, 28.656386],
        '南京': [118.78, 32.04],
        '滨州': [118.03, 37.36],
        '贵阳': [106.71, 26.57],
        '无锡': [120.29, 31.59],
        '本溪': [123.73, 41.3],
        '克拉玛依': [84.77, 45.59],
        '渭南': [109.5, 34.52],
        '马鞍山': [118.48, 31.56],
        '宝鸡': [107.15, 34.38],
        '焦作': [113.21, 35.24],
        '句容': [119.16, 31.95],
        '北京': [116.46, 39.92],
        '徐州': [117.2, 34.26],
        '衡水': [115.72, 37.72],
        '包头': [110, 40.58],
        '绵阳': [104.73, 31.48],
        '乌鲁木齐': [87.68, 43.77],
        '枣庄': [117.57, 34.86],
        '杭州': [120.19, 30.26],
        '淄博': [118.05, 36.78],
        '鞍山': [122.85, 41.12],
        '溧阳': [119.48, 31.43],
        '库尔勒': [86.06, 41.68],
        '安阳': [114.35, 36.1],
        '开封': [114.35, 34.79],
        '济南': [117, 36.65],
        '德阳': [104.37, 31.13],
        '温州': [120.65, 28.01],
        '九江': [115.97, 29.71],
        '邯郸': [114.47, 36.6],
        '临安': [119.72, 30.23],
        '兰州': [103.73, 36.03],
        '沧州': [116.83, 38.33],
        '临沂': [118.35, 35.05],
        '南充': [106.110698, 30.837793],
        '天津': [117.2, 39.13],
        '富阳': [119.95, 30.07],
        '泰安': [117.13, 36.18],
        '诸暨': [120.23, 29.71],
        '郑州': [113.65, 34.76],
        '哈尔滨': [126.63, 45.75],
        '聊城': [115.97, 36.45],
        '芜湖': [118.38, 31.33],
        '唐山': [118.02, 39.63],
        '平顶山': [113.29, 33.75],
        '邢台': [114.48, 37.05],
        '德州': [116.29, 37.45],
        '济宁': [116.59, 35.38],
        '荆州': [112.239741, 30.335165],
        '宜昌': [111.3, 30.7],
        '义乌': [120.06, 29.32],
        '丽水': [119.92, 28.45],
        '洛阳': [112.44, 34.7],
        '秦皇岛': [119.57, 39.95],
        '株洲': [113.16, 27.83],
        '石家庄': [114.48, 38.03],
        '莱芜': [117.67, 36.19],
        '常德': [111.69, 29.05],
        '保定': [115.48, 38.85],
        '湘潭': [112.91, 27.87],
        '金华': [119.64, 29.12],
        '岳阳': [113.09, 29.37],
        '长沙': [113, 28.21],
        '衢州': [118.88, 28.97],
        '廊坊': [116.7, 39.53],
        '菏泽': [115.480656, 35.23375],
        '合肥': [117.27, 31.86],
        '武汉': [114.31, 30.52],
        '大庆': [125.03, 46.58]
      };

      // let planePath = "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";






      let color = ["#fff", "#fff", "#fff"]; //航线的颜色
      let series = [];

      [
        ["长沙", this.XAData],
        ["长沙", this.XNData],
        ["北京", this.YCData]
      ].forEach((item, i) => {
        series.push(
          {
            name: item[0] + " Top3",
            type: "lines",//定义系列的类型为 "lines"，表示这是一条线图系列，用来连接地图上的两个点。
            zlevel: 1,//图层级别，用于控制图形元素的堆叠顺序。值越大，图形会覆盖在值较小的图形上面。
            effect: {
              show: true,//表示显示特效。
              period: 3,//表示特效动画的周期，单位为秒。
              trailLength: 0.7,// 表示特效尾迹的长度
              color: "red", //rrow箭头的颜色
              symbolSize: 5 //表示特效符号的大小
            },
            lineStyle: {
              normal: {
                color: color[i],
                width: 0,
                curveness: 0.2
              }
            },
            data: this.convertData(item[1])
          },
          {
            name: item[0] + " Top3",
            type: "lines",
            zlevel: 2,
            symbol: ["none", "arrow"],//指定系列的符号。这里定义了两种符号，第一个是 "none" 表示无符号（在本例中，可能用于起点），第二个是 "arrow" 表示箭头
            symbolSize: 10,
            effect: {
              show: false,
              period: 6,
              trailLength: 0,
              // symbol: planePath,
              symbolSize: 6
            },
            lineStyle: {
              normal: {
                color: color[i],
                width: 1,
                opacity: 0.6,//表示线条的不透明度为 0.6
                curveness: 0.2//表示线条的曲率，这里设置为 0.2
              }
            },
            data: this.convertData(item[1]) //数据配置
          },
          {
            name: item[0] + " Top3",
            type: "effectScatter",
            coordinateSystem: "geo",//坐标系类型为地理坐标系，即用经纬度表示的地理位置
            zlevel: 2,
            rippleEffect: {
              brushType: "stroke"//涟漪特效的散点图
            },
            label: {
              normal: {
                show: true,
                position: "right",//标签显示在散点的右侧
                formatter: "{b}"//标签的格式化字符串，其中 {b} 表示显示散点的名称（通常是城市名称
              }
            },
            symbolSize: (val) => {
              return val[2] / 8;
            },
            itemStyle: {
              normal: {
                color: color[i]//定义了正常状态下的样式。color[i] 可能是一个数组或者列表中的第 i 个颜色值，用来给地图上的元素（例如区域）设置颜色。
              },
              emphasis: {
                areaColor: "#2B91B7"//定义了元素的高亮状态下的样式。在这里，设置了 areaColor 为 "#2B91B7"，表示当鼠标悬停在元素上时，元素的背景区域将会显示这种颜色
              }
            },
            data: item[1].map((dataItem) => {
              return {
                name: dataItem[1].name,
                value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
              };
            })
          }
        );
      });

      let option = {
        tooltip: {
          trigger: "item",//表示鼠标悬停在图形元素上时触发提示框
          formatter: (params, ticket, callback) => {
            if (params.seriesType == "effectScatter") {
              return "线路：" + params.data.name + "" + params.data.value[2];//如果是 "effectScatter" 类型的散点图，显示线路名称和散点值
            } else if (params.seriesType == "lines") {
              return (
                params.data.fromName +
                ">" +
                params.data.toName +
                "<br />" +
                params.data.value
              );//如果是 "lines" 类型的连线图，显示起点到终点的名称和值
            } else {
              return params.name;//否则返回参数的名称
            }
          }
        },
        geo: {
          map: "china",//指定使用中国地图
          label: {
            emphasis: {
              show: true,
              color: "#fff"
            }
          },//是地图区域名称的样式设置，在高亮状态下显示白色字体
          roam: false,
          //   放大我们的地图
          zoom: 1,
          itemStyle: {
            normal: {
              areaColor: "rgba(43, 196, 243, 0.42)",
              borderColor: "rgba(43, 196, 243, 1)",
              borderWidth: 1
            },
            emphasis: {
              areaColor: "#2B91B7"
            }
          }//itemStyle 设置地图区域的样式：
          // normal 普通状态下的区域样式，设置区域颜色、边界颜色和边界宽度。
          //           emphasis 高亮状态下的区域样式，设置区域背景颜色。
        },
        series: series
      }

      myChart.setOption(option, true);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);

  },
  beforeRouteLeave(to, from, next) {
    // 获取当前页面的样式元素 
    const styleElements = document.querySelectorAll('style[data-vue-compiled]');
    // 移除样式元素 
    styleElements.forEach(el => el.parentNode.removeChild(el));
    next();
  },
}
</script>

<style lang="scss" scoped>
.brand-container {
  position: absolute;
  width: 100%;
  // height: 100vh;
  background: #000;

  .wrap {
    height: 100%;
    background: url(../assets/img/bg-1.png) no-repeat #000;
    background-size: cover;
    line-height: 1.15;

    header {
      position: relative;
      height: 1rem;
      background: url(../assets/img/brand/head_bg.png) no-repeat top center;
      background-size: 100% 100%;

      h2 {
        color: #7ef0ff;
        font-size: 0.475rem;
        text-align: center;
        line-height: 0.75rem;
        letter-spacing: 1px;
      }

      .weather {
        position: absolute;
        left: 1.375rem;
        top: 0.35rem;
        font-size: 0.25rem;
        color: rgba(126, 240, 255, .7);

        // img {
        //   width: .45rem;
        // }

        // span {
        //   display: inline-block;
        // }

        // .tem {
        //   margin: 0 .1rem 0 .2rem;
        // }
      }

      .showTime {
        position: absolute;
        right: 1.375rem;
        top: 0.5rem;
        color: rgba(126, 240, 255, .7);
        display: flex;

        .time {
          font-size: .28rem;
          margin-right: .18rem;
        }

        .date {
          span {
            display: block;

            &:nth-child(1) {
              font-size: .12rem;
              text-align: right;
            }

            &:nth-child(2) {
              font-size: .14rem;
            }
          }
        }
      }
    }

    .mainbox {
      min-width: 1024px;
      max-width: 1920px;
      padding: 0.125rem 0.125rem 0;
      display: flex;

      .item {
        flex: 3;

        &.center {
          flex: 5;
          margin: 0 0.125rem 0.1rem;
          overflow: hidden;

          // .resume {
          //   background: rgba(101, 132, 226, 0.1);
          //   padding: 0.1875rem;

          //   .resume-hd {
          //     position: relative;
          //     border: 1px solid rgba(25, 186, 139, 0.17);

          //     ul {
          //       display: flex;

          //       %li-line {
          //         content: "";
          //         position: absolute;
          //         height: 50%;
          //         width: 1px;
          //         background: rgba(255, 255, 255, 0.2);
          //         top: 25%;
          //       }

          //       li {
          //         position: relative;
          //         flex: 1;
          //         text-align: center;
          //         height: 1.2rem;
          //         line-height: 1.2rem;
          //         font-size: 0.65rem;
          //         color: #ffeb7b;
          //         padding: 0.05rem 0;
          //         font-family: 'DIGITALDREAMFAT';
          //         font-weight: bold;

          //         &:nth-child(2) {
          //           &:after {
          //             @extend %li-line;
          //             right: 0;
          //           }

          //           &:before {
          //             @extend %li-line;
          //             left: 0;
          //           }
          //         }
          //       }
          //     }

          //     &:before {
          //       content: "";
          //       position: absolute;
          //       width: 30px;
          //       height: 10px;
          //       border-top: 2px solid #02a6b5;
          //       border-left: 2px solid #02a6b5;
          //       top: 0;
          //       left: 0;
          //     }

          //     &:after {
          //       content: "";
          //       position: absolute;
          //       width: 30px;
          //       height: 10px;
          //       border-bottom: 2px solid #02a6b5;
          //       border-right: 2px solid #02a6b5;
          //       right: 0;
          //       bottom: 0;
          //     }
          //   }

          //   .resume-bd {
          //     ul {
          //       display: flex;

          //       li {
          //         flex: 1;
          //         height: 0.5rem;
          //         line-height: 0.5rem;
          //         text-align: center;
          //         font-size: 0.225rem;
          //         color: rgba(255, 255, 255, 0.7);
          //         padding-top: 0.125rem;
          //       }
          //     }
          //   }
          // }
        }

        %map-style {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 6.475rem;
          height: 6.475rem;
          background: url(../assets/img/brand/map.png) no-repeat;
          background-size: 100% 100%;
          opacity: 0.3;
        }

        .map {
          position: relative;
          height: 10.125rem;
          // transform: scale(0.95);

          .chart {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5;
            height: 10.125rem;
            width: 100%;
          }

          .map1 {
            @extend %map-style;
          }

          .map2 {
            @extend %map-style;
            width: 8.0375rem;
            height: 8.0375rem;
            background-image: url(../assets/img/brand/lbx.png);
            opacity: 0.6;
            -webkit-animation: rotate 15s linear infinite;
            animation: rotate 15s linear infinite;
            z-index: 2;
          }

          .map3 {
            @extend %map-style;
            width: 7.075rem;
            height: 7.075rem;
            background-image: url(../assets/img/brand/jt.png);
            -webkit-animation: rotate1 10s linear infinite;
            animation: rotate1 10s linear infinite;
          }
        }

        .panel-left-up {
          position: relative;
          height: 5rem;
          // border: 1px solid rgba(25, 186, 139, 0.17);
          background: url(../assets/img/左1.png);
          padding: 0 0.1875rem 0;
          margin-bottom: 0.7rem;
          background-repeat: no-repeat;
          /* 不重复显示背景图片 */



          // .panel {
          // position: relative;
          // height: 5rem;
          // // border: 1px solid rgba(25, 186, 139, 0.17);
          // background: rgba(255, 255, 255, 0.04) url(../assets/img/brand/line.png);
          // padding: 0 0.1875rem 0;
          // margin-bottom: 0.1875rem;



          // &:before {
          //   position: absolute;
          //   top: 0;
          //   left: 0;
          //   content: "";
          //   width: 10px;
          //   height: 10px;
          //   border-top: 2px solid #02a6b5;
          //   border-left: 2px solid #02a6b5;
          // }

          // &:after {
          //   position: absolute;
          //   top: 0;
          //   right: 0;
          //   content: "";
          //   width: 10px;
          //   height: 10px;
          //   border-top: 2px solid #02a6b5;
          //   border-right: 2px solid #02a6b5;
          // }

          // .panel-footer {
          //   position: absolute;
          //   left: 0;
          //   bottom: 0;
          //   width: 100%;

          //   &:before {
          //     position: absolute;
          //     bottom: 0;
          //     left: 0;
          //     content: "";
          //     width: 10px;
          //     height: 10px;
          //     border-bottom: 2px solid #02a6b5;
          //     border-left: 2px solid #02a6b5;
          //   }

          //   &:after {
          //     position: absolute;
          //     bottom: 0;
          //     right: 0;
          //     content: "";
          //     width: 10px;
          //     height: 10px;
          //     border-bottom: 2px solid #02a6b5;
          //     border-right: 2px solid #02a6b5;
          //   }
          // }

          h2 {
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: #fff;
            font-size: 0.225rem;
            font-weight: 400;

            a {
              margin: 0 0.1875rem;
              color: #fff;
              text-decoration: none;
            }
          }

          .chart {
            height: 3rem;
          }
        }


        .panel-right-up {
          position: relative;
          height: 5rem;
          // border: 1px solid rgba(25, 186, 139, 0.17);
          background: url(../assets/img/右1.png);
          padding: 0 0.1875rem 0;
          margin-bottom: 0.7rem;
          background-repeat: no-repeat;
          /* 不重复显示背景图片 */

          h2 {
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: #fff;
            font-size: 0.225rem;
            font-weight: 400;

            a {
              margin: 0 0.1875rem;
              color: #fff;
              text-decoration: none;
            }
          }

          .chart {
            height: 3rem;
          }
        }

        .panel-right-down {
          position: relative;
          height: 5rem;
          // border: 1px solid rgba(25, 186, 139, 0.17);
          background: url(../assets/img/右2.png);
          padding: 0 0.1875rem 0;
          margin-bottom: 0.1875rem;
          background-repeat: no-repeat;
          /* 不重复显示背景图片 */



          h2 {
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: #fff;
            font-size: 0.225rem;
            font-weight: 400;


            a {
              margin: 0 0.1875rem;
              color: #fff;
              text-decoration: none;
            }
          }

          .chart {
            height: 3rem;
          }
        }

        .panel-left-down {
          position: relative;
          height: 5rem;
          // border: 1px solid rgba(25, 186, 139, 0.17);
          background: url(../assets/img/左2.png);
          padding: 0 0.1875rem 0;
          margin-bottom: 0.1875rem;
          background-repeat: no-repeat;
          /* 不重复显示背景图片 */


          h2 {
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: #fff;
            font-size: 0.225rem;
            font-weight: 400;

            a {
              margin: 0 0.1875rem;
              color: #fff;
              text-decoration: none;
            }
          }

          .chart {
            height: 3rem;
          }
        }
      }

    }

  }

}


// 动画和特效
@-webkit-keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@-webkit-keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}

@media screen and (min-width: 1920) {
  html {
    font-size: 80px !important;
  }
}
</style>
